<template>
  <div class="career-advice">
    <!-- 输入表单 -->
    <el-card class="input-card">
      <template #header>
        <div class="card-header">
          <span>职业规划信息</span>
        </div>
      </template>
      <el-form :model="adviceForm" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="当前技能" prop="skills">
          <el-input
            v-model="adviceForm.skills"
            type="textarea"
            :rows="2"
            placeholder="请输入当前掌握的技能，多个技能用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="当前学历" prop="education">
          <el-select v-model="adviceForm.education" placeholder="请选择当前学历">
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="硕士" value="硕士" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作经验" prop="experience">
          <el-select v-model="adviceForm.experience" placeholder="请选择工作经验">
            <el-option label="无" value="无" />
            <el-option label="1-3年" value="1-3年" />
            <el-option label="3-5年" value="3-5年" />
            <el-option label="5-10年" value="5-10年" />
            <el-option label="10年以上" value="10年以上" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标职位" prop="targetPosition">
          <el-input v-model="adviceForm.targetPosition" placeholder="请输入目标职位" />
        </el-form-item>
        <el-form-item label="职业目标" prop="careerGoal">
          <el-input v-model="adviceForm.careerGoal" placeholder="请输入职业目标" />
        </el-form-item>
        <el-form-item label="目标城市" prop="city">
          <el-select v-model="adviceForm.city" placeholder="请选择目标城市">
            <el-option label="北京" value="北京" />
            <el-option label="上海" value="上海" />
            <el-option label="广州" value="广州" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleGetAdvice" 
            :loading="loading"
            :disabled="loading"
            class="advice-btn"
          >
            <el-icon v-if="!loading" style="margin-right:4px;"><Lightning /></el-icon>
            {{ loading ? '生成中...' : '获取职业建议' }}
          </el-button>
          <span v-if="loading" class="advice-tip">生成可能需要几秒钟，请耐心等待...</span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 建议展示区域 -->
    <div v-if="adviceData" class="advice-content">
      <!-- 潜在职位 -->
      <el-card class="advice-card">
        <template #header>
          <div class="card-header">
            <span>潜在职位方向</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(position, index) in potentialPositions"
            :key="index"
            :type="getTimelineItemType(index)"
            :hollow="index === 0 || index === potentialPositions.length - 1"
          >
            {{ position }}
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 学历建议 -->
      <el-card class="advice-card">
        <template #header>
          <div class="card-header">
            <span>学历提升建议</span>
          </div>
        </template>
        <div class="advice-text" v-html="formatAdviceText(adviceData.educationAdvice)"></div>
      </el-card>

      <!-- 职业路径建议 -->
      <el-card class="advice-card">
        <template #header>
          <div class="card-header">
            <span>职业发展路径</span>
          </div>
        </template>
        <el-steps direction="vertical" :active="4">
          <el-step
            v-for="(step, index) in careerPathSteps"
            :key="index"
            :title="step.title"
            :description="step.content"
          />
        </el-steps>
      </el-card>

      <!-- 市场洞察 -->
      <el-card class="advice-card">
        <template #header>
          <div class="card-header">
            <span>市场洞察</span>
          </div>
        </template>
        <div class="advice-text" v-html="formatAdviceText(adviceData.marketInsight)"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Lightning } from '@element-plus/icons-vue'

// 表单引用
const formRef = ref(null)

// 加载状态
const loading = ref(false)

// 表单数据
const adviceForm = ref({
  skills: '',
  education: '',
  experience: '',
  targetPosition: '',
  careerGoal: '',
  city: ''
})

// 表单验证规则
const rules = {
  skills: [{ required: true, message: '请输入当前技能', trigger: 'blur' }],
  education: [{ required: true, message: '请选择当前学历', trigger: 'change' }],
  experience: [{ required: true, message: '请选择工作经验', trigger: 'change' }],
  targetPosition: [{ required: true, message: '请输入目标职位', trigger: 'blur' }],
  careerGoal: [{ required: true, message: '请输入职业目标', trigger: 'blur' }],
  city: [{ required: true, message: '请选择目标城市', trigger: 'change' }]
}

// 建议数据
const adviceData = ref(null)

// 获取建议
const handleGetAdvice = async () => {
  // 表单验证
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
  } catch (error) {
    ElMessage.warning('请填写完整的职业规划信息')
    return
  }

  loading.value = true
  try {
    const params = {
      skills: adviceForm.value.skills.split(',').map(skill => skill.trim()),
      education: adviceForm.value.education,
      experience: adviceForm.value.experience,
      targetPosition: adviceForm.value.targetPosition,
      careerGoal: adviceForm.value.careerGoal,
      city: adviceForm.value.city,
      page: 1,
      size: 10
    }

    const response = await axios.post('http://localhost:8081/api/recommendations/career-advice', params)
    if (response.data.code === 200) {
      adviceData.value = response.data.data
      ElMessage.success('获取职业建议成功')
    }
  } catch (error) {
    console.error('获取职业建议失败:', error)
    ElMessage.error('获取职业建议失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 格式化建议文本
const formatAdviceText = (text) => {
  if (!text) return ''
  return text
    .replace(/\*\*/g, '')
    .replace(/\n/g, '<br>')
    .replace(/- /g, '• ')
}

// 获取时间线项目类型
const getTimelineItemType = (index) => {
  if (index === 0 || index === potentialPositions.value.length - 1) return 'info'
  return 'primary'
}

// 计算属性：潜在职位列表
const potentialPositions = computed(() => {
  if (!adviceData.value?.potentialPositions) return []
  return adviceData.value.potentialPositions.filter(pos => !pos.includes('**'))
})

// 计算属性：职业路径步骤
const careerPathSteps = computed(() => {
  if (!adviceData.value?.careerPathAdvice) return []
  
  const advice = adviceData.value.careerPathAdvice
    .replace(/\*\*/g, '')
    .split('\n')
    .filter(line => line.trim().startsWith('-'))
    .map(line => {
      const [year, content] = line.replace('- ', '').split('：')
      return {
        title: year,
        content: content
      }
    })
  
  return advice
})
</script>

<style scoped>
.career-advice {
  padding: 20px;
}

.input-card {
  margin-bottom: 20px;
}

.advice-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.advice-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.advice-text {
  line-height: 1.8;
  color: #606266;
}

:deep(.el-select) {
  width: 180px;
}

:deep(.el-timeline-item__content) {
  color: #606266;
}

:deep(.el-step__description) {
  padding-right: 10%;
  color: #606266;
}

:deep(.el-button.is-loading) {
  pointer-events: none;
}

.advice-btn {
  border-radius: 24px;
  font-weight: 600;
  background: linear-gradient(90deg, #409EFF 0%, #36D1DC 100%);
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  transition: all 0.2s;
  padding: 0 24px;
}
.advice-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(64,158,255,0.15);
}
.advice-tip {
  margin-left: 16px;
  color: #909399;
  font-size: 14px;
  vertical-align: middle;
}
</style>